import React from 'react'
import { Card,Table,Button,Popconfirm} from 'antd'

let dataSource;

const style = {
    height: 40,
    width: 40,
    lineHeight: '40px',
    borderRadius: 4,
    backgroundColor: '#1088e9',
    color: '#fff',
    textAlign: 'center',
    fontSize: 14,
    zIndex:100
  };

let url = 'https://www.304cloud.top:4321/getsourceimglist';
        fetch(url)
        .then(res=>res.json())
        .then(res=>{
            dataSource = res.data
        })

const Img = () => {
    const columns = [
        {
            title:'图片素材id',
            key:'source_img_id',
            width:50,
            align:'center',
            dataIndex:'source_img_id'
        },
        {
            title:'图片素材',
            width:150,
            dataIndex:'source_img_img',
            align:'center',
            render:(txt,record) => record.source_img_img? (<img src={"https://www.304cloud.top:4321"+record.source_img_img} alt={record.name} style={{width:"200px"}}/>
            ):(
                "暂无图片"
            )
        },
        {
            title:'操作',
            width:120,
            align:'center',
            render:(txt,record,index)=>{
                return(
                    <div>
                        <Popconfirm title="确定删除此项？" 
                        onCancel={()=>console.log('用户取消删除')} 
                        onConfirm={()=>{
                            console.log('用户确定删除');
                            //此处调用删除api
                        }}
                        >
                            <Button style={{margin:"0 0.3rem"}} type="danger" size="small">删除</Button>
                        </Popconfirm>
                       
                    </div>
                )
            }
        },
    ]
    return (
        <div>
            <Card title="图片素材列表" extra={<Button type="primary" size="small">添加</Button>}>
                <Table pagination={{defaultPageSize:4}} columns={columns} bordered dataSource={dataSource}/>
            </Card>
        </div>
        
    )
}

export default Img
